<template>
  <div class="state">
    订单详情---展示222222
    <!-- 选项卡结构 -->
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane label="全部" name="全部">
        <el-form :model="list">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="产品" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="Start date"
              end-placeholder="End date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUserVisible = true" style="width: 100px">
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 代付款 -->
      <el-tab-pane label="待付款" name="待付款">
        <el-form :model="list" style="width: 100%">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input
              v-model="list.id" 
              placeholder="请输入订单编号"
              type="text"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="产品" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="Start date"
              end-placeholder="End date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="editUserVisible = true"
              style="width: 100px"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 代发货 -->
      <el-tab-pane label="待发货" name="待发货">
        <el-form :model="list" style="width: 100%">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input
              v-model="list.id"
              placeholder="请输入订单编号"
              type="text"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="产品" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="Start date"
              end-placeholder="End date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="editUserVisible = true"
              style="width: 100px"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 待收货 -->
      <el-tab-pane label="待收货" name="待收货">
        <el-form :model="list" style="width: 100%">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input
              v-model="list.id"
              placeholder="请输入订单编号"
              type="text"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="产品" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="Start date"
              end-placeholder="End date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="editUserVisible = true"
              style="width: 100px"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 已完成 -->
      <el-tab-pane label="已完成" name="已完成">
        <el-form :model="list" style="width: 100%">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input
              v-model="list.id"
              placeholder="请输入订单编号"
              type="text"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="产品" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="Start date"
              end-placeholder="End date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="editUserVisible = true"
              style="width: 100px"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn"
            >editUserVisible
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <!-- table -->
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="ID" prop="id" />
      <el-table-column label="用户id" prop="userId" />
      <el-table-column label="商品id" prop="productId" />
      <el-table-column label="订单编号" prop="orderNo" />
      <el-table-column label="订单状态" prop="status" />
      <el-table-column label="家具类别" prop="itemInfo" />
      <el-table-column label="购买数量" prop="itemCount" />
      <el-table-column label="商品单价" prop="sigPrice" />
      <el-table-column label="价格" prop="itemPrice" />
      <el-table-column label="快递公司" prop="notes" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="下单时间" prop="orderCreateTime" />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row)"
            >删除订单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除确认框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span>确认删除</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handrevess"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang= "ts" setup>
import { reactive, ref, computed } from "vue";
import { Download } from "@element-plus/icons-vue";
import { getState } from "../../api/state";

// 订单状态数据
const loadState = async () => {
  const result: any = await getState();
  result.forEach((it: any) => {
    it.status = ["待付款", "待发货", "待收货", "已完成"][
      Math.floor(Math.random() * 4)
    ];
  });
  tableData.value = result;
  console.log(result);
};
loadState();
//定义表格搜索栏
const editUserVisible = ref();
const dialogVisible = ref(false); // 删除
// 查询
const search = ref("");

// function filtData() {
//   filterTableData = tableData.value.filter((it: any) => {
//     return it.orderNo.includes(search.value);
//   });
// }

interface tableData {
  id: number;
  address: null | string;
  itemCount: number;
  itemInfo: string;
  itemPrice: number;
  notes: string;
  orderCreateTime: string;
  orderNo: string;
  productId: number;
  sigPrice: null;
  status: string;
  userId: number;
}

const tableData = ref([
  {
    id: 1,
    userId: 1,
    productId: 1,
    orderNo: "T05789360039",
    status: '待付款',
    itemInfo: "圆桌",
    itemCount: 2,
    sigPrice: null,
    itemPrice: 1029,
    notes: "顺丰加急，运输有损拒收",
    address: "四川省成都市武侯肖家河40号",
    orderCreateTime: "2023-05-20T23:20:28",
  },
  {
    id: 2,
    userId: 2,
    productId: 2,
    orderNo: "T05789360183",
    status: "待发货",
    itemInfo: "床头柜",
    itemCount: 1,
    sigPrice: null,
    itemPrice: 85,
    notes: "暂无备注",
    address: "山东大学北门",
    orderCreateTime: "2023-05-20T23:24:23",
  },
  {
    id: 3,
    userId: 2,
    productId: 3,
    orderNo: "T00193277852",
    status: '待收货',
    itemInfo: "电视柜",
    itemCount: 1,
    sigPrice: null,
    itemPrice: 239,
    notes: "暂无备注",
    address: "隔壁",
    orderCreateTime: "2023-05-20T23:25:40",
  },
  {
    id: 4,
    userId: 1,
    productId: 4,
    orderNo: "T00099718321",
    status: '已完成',
    itemInfo: "合家欢木板",
    itemCount: 1,
    sigPrice: null,
    itemPrice: 9.99,
    notes: "暂无备注",
    address: null,
    orderCreateTime: "2023-05-21T12:19:30",
  },
  {
    id: 5,
    userId: 1,
    productId: 4,
    orderNo: "T00719556252",
    status: '待发货',
    itemInfo: "被子",
    itemCount: 2,
    sigPrice: null,
    itemPrice: 19.99,
    notes: "微辣",
    address: "肖家河40号",
    orderCreateTime: "2023-05-21T12:19:30",
  },
  {
    id: 6,
    userId: 1,
    productId: 5,
    orderNo: "T00789001438",
    status: '待收货',
    itemInfo: "摇摇车01",
    itemCount: 1,
    sigPrice: null,
    itemPrice: 9.99,
    notes: "微辣",
    address: "武侯肖家河街40号",
    orderCreateTime: "2023-05-22T10:05:48",
  },
  {
    id: 7,
    userId: 1,
    productId: 5,
    orderNo: "T00789001391",
    status: '待付款',
    itemInfo: "摇摇车02",
    itemCount: 2,
    sigPrice: null,
    itemPrice: 19.98,
    notes: "微辣",
    address: "武侯肖家河街40号",
    orderCreateTime: "2023-05-22T10:12:33",
  },
  {
    id: 8,
    userId: 1,
    productId: 3,
    orderNo: "T00443950107",
    status: '已完成',
    itemInfo: "摇摇车03",
    itemCount: 2,
    sigPrice: null,
    itemPrice: 19.98,
    notes: "微辣",
    address: "武侯肖家河街40号",
    orderCreateTime: "2023-05-22T10:43:27",
  },
]);

const value1 = ref("");
const list = reactive({
  id: "",
  pet: "",
  price: "",
});

// 定义选项卡激活的索引值
const activeTab = ref("全部");

// let dateCon:any = computed(()=>{
//   let v1 = new Date(value1.value[0]).getTime()
//   let v2 = new Date(value1.value[1]).getTime()
//   let curV = 
// })

// 使用计算属性根据选项卡激活的索引值过滤订单数据
let filterTableData: any = computed(() => {
  console.log(activeTab.value);
  if (activeTab.value === "全部") {
    console.log(value1.value)
    return tableData.value.filter((it:any)=>{
      // let v3 = new Date(it.orderCreateTime.slice(0,10)).getTime()
      
      return it.orderNo.includes(list.id)&&it.itemInfo.includes(list.pet)
    })
  } else {
    return tableData.value.filter(
      (item: any) => item.status === activeTab.value && item.orderNo.includes(list.id) && item.itemInfo.includes(list.pet)
    );
  }
});

// 创建计算属性，根据activeTab过滤表格数据
// const filterTableData = computed(() => {
//       if (state.activeTab === '全部') {
//         return state.tableData;
//       }
//       // const status = state.tabLabels.findIndex((label: any) => label === state.activeTab
//       // );
//       return state.tableData.filter((item: any) => item.dstatus === status);
//     });
// 删除
const delateId = ref("1234");
const handleDelete = (row: any) => {
  console.log("删除");
  delateId.value = row.id;
  dialogVisible.value = true;
};
// 删除逻辑
const handrevess = () => {
  tableData.value = tableData.value.filter(
    (item: any) => item.id !== delateId.value
  );
  console.log(tableData.value);

  dialogVisible.value = false;
};
</script>

<style lang= "less" scoped>
.el-form {
  display: flex;
  justify-content: space-around;
}
</style>
